<template>
  <div style="height: 600px">
    <div class="flex-row-start-start" style="width: 94.99%">
      <div style="width: 95%" class="flex-row-start-center">
        <Select
          v-model="kqName"
          style="width: calc(13.09% - 10px); margin-right: 10px"
          placeholder="库区名称"
          size="large"
          clearable
          @on-change="selKqName"
        >
          <Option v-for="item in kqNameList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
        <Select
          v-model="jzName"
          style="width: calc(13.09% - 10px); margin-right: 10px"
          placeholder="井组名称"
          size="large"
          clearable
        >
          <Option v-for="item in jzNameList" :key="item" :value="item">{{
            item
          }}</Option>   
        </Select>
        <Select
          v-model="jcType"
          style="width: calc(13.09% - 10px); margin-right: 10px"
          placeholder="检测类型"
          size="large"
          clearable
        >
          <Option v-for="item in jcTypeList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
      </div>
      <div style="width: 5%" class="flex-row-end-center">
        <Button type="error" @click="onQuery">查询</Button>
      </div>
    </div>


    <div style="margin-top: 20px" class="flex-row-start-start">
      <div style="width: 95%">
        <Table :columns="columns" :data="tableData">
          <template slot="action" slot-scope="{ row, index }">
            <div class="flex-row-start-start">
              <Icon
                type="md-create"
                size="20"
                @click="updateItem(row, index)"
                class="hover-icon"
              ></Icon>
              <Icon
                type="md-trash"
                size="20"
                style="margin-left: 5px"
                class="hover-icon"
                @click="deleteItem(row, index)"
              ></Icon>
            </div>
          </template>
        </Table>

        <div
          class="flex-row-end-center"
          style="margin-top: 10px"
          v-if="totalLen > 10"
        >
          <Page
            :total="totalLen"
            :page-size="pageSize"
            show-total
            @on-change="changepage"
          />
        </div>
      </div>
      <div style="width: 5%">
        <!-- <div>
          <Button style="width: 65px" @click="addData">新增</Button>
        </div> -->
        <div class="flex-row-center-center">
          <Button
            style="width: 65px; margin-top: 10px"
            class="flex-row-center-center"
            @click="importExcel"
            >批量导入</Button
          >
          <input
            type="file"
            ref="uploadExcel"
            v-show="false"
            accept=".xls,.xlsx"
            @change="readExcel($event)"
          />
        </div>
      </div>
    </div>
    <Modal v-model="showModal" width="40" @on-ok="submitUpdate">
      <p slot="header">{{ selectItem.jcEventId }}检测事件信息详情</p>
      <div>
        <div class="flex-row-start-center wrap">
          <div class="modal-title flex-row-end-center">
            <span>采样检测时间编号:</span>
          </div>
          <div class="modal-value">{{ selectItem.jcEventId }}</div>
        </div>
        <div class="flex-row-start-center wrap">
          <div class="modal-title flex-row-end-center">
            <span>库区名称:</span>
          </div>
          <div class="modal-value">{{ selectItem.kqName }}</div>
        </div>
        <div class="flex-row-start-center wrap">
          <div class="modal-title flex-row-end-center">
            <span>井组编号:</span>
          </div>
          <div class="modal-value">{{ selectItem.jzId }}</div>
        </div>
        <div class="flex-row-start-center wrap">
          <div class="modal-title flex-row-end-center">
            <span>检测类型:</span>
          </div>
          <div class="modal-value">{{ selectItem.jcType }}</div>
        </div>
        <div class="flex-row-start-center wrap">
          <div class="modal-title flex-row-end-center">
            <span>检测点编号:</span>
          </div>
          <div class="modal-value">{{ selectItem.jcdId }}</div>
        </div>
        <div class="flex-row-start-center wrap">
          <div class="modal-title flex-row-end-center">
            <span>检测点坐标:</span>
          </div>
          <div class="modal-value">{{ selectItem.jcPoint }}</div>
        </div>
        <div class="flex-row-start-center wrap">
          <div class="modal-title flex-row-end-center">
            <span>检测时间:</span>
          </div>
          <DatePicker
            type="date"
            placeholder="检测时间"
            :value="itemjcTime"
            format="yyyy年MM月dd日"
            @on-change="changeitemJcTime"
            size="large"
          ></DatePicker>
        </div>
        <div class="flex-row-start-center wrap">
          <div class="modal-title flex-row-end-center">
            <span>数据录入时间:</span>
          </div>
          <div class="modal-value">{{ selectItem.updateTime }}</div>
        </div>
        <div class="flex-row-start-center wrap">
          <div class="modal-title flex-row-end-center">
            <span>检测示踪剂类型:</span>
          </div>
          <Input class="modal-value" v-model="itemszjType" />
        </div>
        <div class="flex-row-start-center wrap">
          <div class="modal-title flex-row-end-center">
            <span>检测数值:</span>
          </div>
          <Input class="modal-value" v-model="itemjcValue" />
        </div>
      </div>
    </Modal>
    <Modal v-model="showDelete" style="width: 200px" @on-ok="submitDelete">
      <p slot="header">删除警告</p>
      <div class="flex-row-center-center warning">确定删除么？</div>
    </Modal>
  </div>
</template>
<script>
import { Table } from 'iview';

export default {
  data() {
    return {
      arrList: [],
      curPage: 0,
      selectItem: "",
      showModal: false,
      showDelete: false,
      selectId: "",
      itemszjType: "",
      itemjcTime: "",
      itemjcValue: "",
      pageSize: 10,
      tableData: [],
      jzIdList: [],
      jcTypeList: ["连通性","井口示踪剂","地表示踪剂",'环空示踪剂'],
      jcdIdList: [],
      jcEventIdList: [],
      kqNameList: ["金坛","刘庄"],
      jcTime: "",
      szjTypeList: [],
      jzNameList:[],
      jcdNameList: [],
      jcEventId: "",
      kqId: "",
      jcType: "",
      jcdId: "",
      jzId: "",
      jzName:"",
      jcdName:"",
      szjType: "",
      startTime: "",
      updateTime: "",
      kqName: "",
      columns: [
        //检测事件
        { title: "库区名称", key: "kqName" ,width:100},
        { title: "井组名称", key: "jzName" ,width:90},
        { title: "检测点名称", key: "jcdName" ,width:120},
        { title: "检测类型", key: "jcType",width:100 },
        { title: "检测点坐标", key: "jcPoint" ,width:200},
        { title: "检测时间", key: "jcTime" ,width:130},
        { title: "检测数值", key: "jcValue" ,        
        render: (h, params) => {
          // 使用createElement创建按钮
          // console.log(params.row.jcValue)
          if(params.row.jcValue==0.0)
          {
            return h('div',params.row.jcValue)
          }else{
            return h('div',{style:{color:"red"}},params.row.jcValue)
          }
        }
      },

        // { title: "采样检测时间编号", key: "jcEventId" },
        // { title: "库区名称", key: "kqName" ,width:100},
        // { title: "井组编号", key: "jzId" },
        // { title: "井组名称", key: "jzName" ,width:90},
        // { title: "检测点名称", key: "jcdName" ,width:120},
        // { title: "检测类型", key: "jcType",width:100 },
        // { title: "检测点编号", key: "jcdId" },
        // { title: "检测点坐标", key: "jcPoint" ,width:200},
        // { title: "坐标", key: "jcPoint" ,width:200},
        // { title: "检测时间", key: "jcTime" ,width:130},
        // { title: "注入时间", key: "jcTime" ,width:200},
        // { title: "放气时间", key: "jcTime" },
        // { title: "数据录入时间", key: "updateTime" },
        // { title: "检测示踪剂类型", key: "szjType" },
        // { title: "钢瓶编号", key: "szjType" },
        // { title: "检测数值", key: "jcValue" },
        // { title: "放气量（立方）", key: "jcValue" },
        // { title: "放气部位", key: "jcdName" },
        // { title: "备注", key: "szjType" },
        // { title: "注入量（kg）", key: "jcValue" },
        { title: "操作", key: "action", slot: "action" ,width:80},
      ],
    };
  },
  props: {
    jcEventList: Array,
    totalLen: Number,
  },
  watch: {
    jcEventList(val) {
      console.log("jcEventList")
      this.curPage = 0;
      this.tableData = val;
      let it = this;
      this.jcEventIdList = [];
      // this.kqNameList = [];
      this.jzIdList = [];
      // this.jzNameList = [];
      this.jcdNameList = [];
      this.jcdIdList = [];
      this.jcdNameList = [];
      this.startTime = "";
      this.updateTime = "";
      this.sjzTypeList = [];
    },
  },

  created(){
    console.log("组件初始化22222")
    this.getJzNameList()
    // console.log(<Table/>)
  },

  methods: {
    selKqName(event){
      this.getJzNameList()
    },
    deleteItem(row, index) {
      this.selectId = index;
      this.selectItem = row;
      this.showDelete = true;
    },
    importExcel() {
      this.$refs.uploadExcel.click();
    },
    readExcel(e) {
      this.arrList = [];
      const files = e.target.files;
      if (files.length <= 0) {
        //如果没有文件名
        return false;
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = this.XLSX.read(data, {
            type: "binary",
          });

          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //获取到XLSX表格中的数据,并生成json格式的数据类型
          let arr = [];
          ws.forEach((item) => {
            arr.push({
              kqName: item["库区"],
              JzName: item["所属井组"],
              JcdName: item["所属检测点"],
              jcPoint: item["坐标"],
              jcValue: item["检测值"],
              jcTime: item["检测时间"],
              jcType: item["检测类型"],
              bottle: item["钢瓶编号"],
              notes:item["备注"],
            });
          });

          let it = this;
          arr.forEach((item) => {
            let arr = [];

            let o = {};
            o.kqName = item.kqName;
            o.JzName = item.JzName;
            o.JcdName = item.JcdName;
            o.jcValue = item.jcValue;
            o.jcType = item.jcType;
            o.jcTime = item.jcTime;

            o.bottle = item.bottle;
            o.notes = item.notes;
            //提取坐标
            let jcXpoint = "";
            let jcYpoint = "";
            if (
              item.jcPoint != "" 
              // &&
              // item.jcPoint.indexOf("(") > -1 &&
              // item.jcPoint.indexOf(")") > -1
            ) {
              // let start = item.jcPoint.indexOf("(");
              // let end = item.jcPoint.indexOf(")");
              // let ele = item.jcPoint.substring(start + 1, end);
              arr = item.jcPoint.split(",");
              // jcXpoint = arr[0];
              // jcYpoint = arr[1];
              // y在前，x在后
              jcXpoint = arr[1];
              jcYpoint = arr[0];
            }else{
              jcXpoint = 0;
              jcYpoint = 0;
            }
            o.jcYpoint = jcYpoint;
            o.jcXpoint = jcXpoint;

            it.arrList.push(o);
          });

          if(it.arrList.length>=1)
          {
            console.log("提取结果，从2开始编号")
            it.arrList.forEach(
              (item,index)=>{
                console.log(index+2, JSON.stringify(item))
              }
            )
          }
          this.postData();
        } catch (e) {
          console.log(e)
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    },
    getJzNameList(){
      let param={kqName:this.kqName};
      this.$axios
        .post("/getJzNameList", param, {
          headers: { "Content-Type": "application/json;charset=UTF-8" },
        })
        .then((response) => {
            console.log(response.data)
            if(response.data!=null)
            {
              this.jzNameList=response.data;
            }
        })
        .catch((error) => {});
    },
    postData() {
      let param = {};
      param.jcEventList = JSON.stringify(this.arrList);
      console.log("==========", param)
      this.$qs.stringify(param, { arrayFormat: "indices", allowDots: true }),
        this.$axios
          .post("/mutipleImportJcEventInfo", param, {
            headers: { "Content-Type": "application/json;charset=UTF-8" },
          })
          .then((response) => {
            if(response.data==true)
              {
                console.log("导入成功");
                alert("导入成功");
              }
              else{
                console.log("导入失败");
                alert("导入失败");
              }
          })
          .catch((error) => {});
    },
    submitDelete() {
      let param = {};
      let it = this;
      param.jcEventId = this.selectItem.jcEventId;
      this.$axios({
        url: "/deleteOneJcEventInfo",
        type: "post",
        params: param,
      })
        .then((res) => {
          if (res.data) {
            alert("已删除");
            let o = {};
            if (it.jcEventId == "" || it.jcEventId == undefined) {
              it.jcEventId = "";
            }
            if (it.kqName == "" || it.kqName == undefined) {
              it.kqName = "";
            }
            if (it.jzId == "" || it.jzId == undefined) {
              it.jzId = "";
            }
            if (it.jzName == "" || it.jzName == undefined) {
              it.jzName = "";
            }
            if (it.jcType == "" || it.jcType == undefined) {
              it.jcType = "";
            }
            if (it.jcdId == "" || it.jcdId == undefined) {
              it.jcdId = "";
            }
            if (it.jcdName == "" || it.jcdName == undefined) {
              it.jcdName = "";
            }
            if (it.jcTime == "" || it.jcTime == undefined) {
              it.jcTime = "";
            }
            if (it.updateTime == "" || it.updateTime == undefined) {
              it.updateTime = "";
            }
            if (it.szjType == "" || it.szjType == undefined) {
              it.szjType = "";
            }
            o.jcEventId = it.jcEventId;
            o.kqName = it.kqName;
            o.jzId = it.jzId;
            o.jzName = it.jzName;
            o.jcType = it.jcType;
            o.jcdId = it.jcdId;
            o.jcdName = it.jcdName;
            o.jcTime = it.jcTime;
            o.updateTime = it.updateTime;
            o.szjType = it.szjType;
            if (res.data <= this.pageSize * this.curPage && res.data > 0) {
              o.page = this.curPage - 2;
            } else {
              o.page = this.curPage -1;
            }
            this.$emit("update-jcEvent", o);
          } else {
            alert("删除失败");
          }
        })
        .catch((error) => {});
    },
    updateItem(item, id) {
      this.selectId = id;
      this.selectItem = item;
      this.itemjcTime = this.selectItem.jcTime;
      this.itemszjType = this.selectItem.szjType;
      this.itemjcValue = this.selectItem.jcValue;
      this.showModal = true;
    },
    submitUpdate() {
      let param = {};
      param.jcEventId = this.selectItem.jcEventId;
      param.jcTime =
        this.itemjcTime.substring(0, 4) +
        "-" +
        this.itemjcTime.substring(5, 7) +
        "-" +
        this.itemjcTime.substring(8, 10);
      param.szjType = this.itemszjType;
      param.jcValue = this.itemjcValue;
      let it = this;
      this.$axios({
        url: "/updateOneJcEventInfo",
        type: "post",
        params: param,
      })
        .then((res) => {
          let o = {};
          if (it.jcEventId == "" || it.jcEventId == undefined) {
            it.jcEventId = "";
          }
          if (it.kqName == "" || it.kqName == undefined) {
            it.kqName = "";
          }
          if (it.jzId == "" || it.jzId == undefined) {
            it.jzId = "";
          }
          if (it.jzName == "" || it.jzName == undefined) {
            it.jzName = "";
          }
          if (it.jcType == "" || it.jcType == undefined) {
            it.jcType = "";
          }
          if (it.jcdId == "" || it.jcdId == undefined) {
            it.jcdId = "";
          }
          if (it.jcdName == "" || it.jcdName == undefined) {
            it.jcdName = "";
          }
          if (it.jcTime == "" || it.jcTime == undefined) {
            it.jcTime = "";
          }
          if (it.updateTime == "" || it.updateTime == undefined) {
            it.updateTime = "";
          }
          if (it.szjType == "" || it.szjType == undefined) {
            it.szjType = "";
          }
          o.jcEventId = it.jcEventId;
          o.kqName = it.kqName;
          o.jzId = it.jzId;
          o.jzName = it.jzName;
          o.jcType = it.jcType;
          o.jcdId = it.jcdId;
          o.jcdName = it.jcdName;
          o.jcTime = it.jcTime;
          o.updateTime = it.updateTime;
          o.szjType = it.szjType;
          o.page = this.curPage -1;
          this.$emit("update-jcEvent", o);
          alert("修改成功");
        })
        .catch((error) => {});
    },
    changeitemJcTime(val) {
      this.itemjcTime = val;
    },
    addData() {
      this.$emit("switch-to-add", false);
    },
    changeStartTime(val) {
      console.log("=================")
      console.log(val)
      this.startTime = val;
    },
    changeUpdateTime(val) {
      this.updateTime = val;
    },
    changepage(index) {
      let it = this;
      let o = {};

      if (it.jcEventId == "" || it.jcEventId == undefined) {
        it.jcEventId = "";
      }
      if (it.kqName == "" || it.kqName == undefined) {
        it.kqName = "";
      }
      if (it.jzId == "" || it.jzId == undefined) {
        it.jzId = "";
      }
      if (it.jzName == "" || it.jzName == undefined) {
        it.jzName = "";
      }
      if (it.jcType == "" || it.jcType == undefined) {
        it.jcType = "";
      }
      if (it.jcdId == "" || it.jcdId == undefined) {
        it.jcdId = "";
      }
      if (it.jcdName == "" || it.jcdName == undefined) {
        it.jcdName = "";
      }
      if (it.jcTime == "" || it.jcTime == undefined) {
        it.jcTime = "";
      }
      if (it.updateTime == "" || it.updateTime == undefined) {
        it.updateTime = "";
      }
      if (it.szjType == "" || it.szjType == undefined) {
        it.szjType = "";
      }
      o.jcEventId = it.jcEventId;
      o.kqName = it.kqName;
      o.jzId = it.jzId;
      o.jzName = it.jzName;
      o.jcType = it.jcType;
      o.jcdId = it.jcdId;
      o.jcdName = it.jcdName;
      o.jcTime = it.jcTime;
      o.updateTime = it.updateTime;
      o.szjType = it.szjType;
      o.page = index - 1;
      this.curPage = index;
      this.$emit("change-to-page", o);
    },
    onQuery() {
      let it = this;
      let o = {};
      if (it.jcEventId == "" || it.jcEventId == undefined) {
        it.jcEventId = "";
      }
      if (it.kqName == "" || it.kqName == undefined) {
        it.kqName = "";
      }
      if (it.jzId == "" || it.jzId == undefined) {
        it.jzId = "";
      }
      if (it.jzName == "" || it.jzName == undefined) {
        it.jzName = "";
      }
      if (it.jcType == "" || it.jcType == undefined) {
        it.jcType = "";
      }
      if (it.jcdId == "" || it.jcdId == undefined) {
        it.jcdId = "";
      }
      if (it.jcdName == "" || it.jcdName == undefined) {
        it.jcdName = "";
      }
      if (it.jcTime == "" || it.jcTime == undefined) {
        it.jcTime = "";
      }
      if (it.updateTime == "" || it.updateTime == undefined) {
        it.updateTime = "";
      }
      if (it.szjType == "" || it.szjType == undefined) {
        it.szjType = "";
      }
      o.jcEventId = it.jcEventId;
      o.kqName = it.kqName;
      o.jzId = it.jzId;
      o.jzName = it.jzName
      o.jcType = it.jcType;
      o.jcdId = it.jcdId;
      o.jcdName = it.jcdName;
      o.jcTime = it.jcTime;
      o.updateTime = it.updateTime;
      o.szjType = it.szjType;
      o.page = 0;
      this.$emit("change-to-page", o);
    },
    query() {
      let data = [];
      let it = this;
      if (
        !(
          (it.jcEventId == "" || it.jcEventId == undefined) &&
          (it.kqName == "" || it.kqName == undefined) &&
          (it.jzId == "" || it.jzId == undefined) &&
          (it.jcType == "" || it.jcType == undefined) &&
          (it.jcdId == "" || it.jcdId == undefined) &&
          (it.jcTime == "" || it.jcTime == undefined) &&
          (it.updateTime == "" || it.updateTime == undefined) &&
          (it.szjType == "" || it.szjType == undefined)
        )
      ) {
        data = this.jcEventList.filter(function (item) {
          return (
            (it.jcEventId != "" && it.jcEventId != undefined
              ? item.jcEventId == it.jcEventId
              : true) &&
            (it.kqName != "" && it.kqName != undefined
              ? item.kqName == it.kqName
              : true) &&
            (it.jzId != "" && it.jzId != undefined
              ? item.jzId == it.jzId
              : true) &&
            (it.jcType != "" && it.jcType != undefined
              ? item.jcType == it.jcType
              : true) &&
            (it.jcdId != "" && it.jcdId != undefined
              ? item.jcdId == it.jcdId
              : true) &&
            (it.jcTime != "" && it.jcTime != undefined
              ? item.jcTime == it.jcTime
              : true) &&
            (it.updateTime != "" && it.updateTime != undefined
              ? item.updateTime == it.updateTime
              : true) &&
            (it.szjType != "" && it.szjType != undefined
              ? item.szjType == it.szjType
              : true)
          );
        });
        this.tableData = data;
      } else {
        this.tableData = this.jcEventList;
      }
    },
  },
};
</script>
<style scoped>
.test-style {
  color: black;
  font-size: 18px;
  text-align: center;
  font-family: "SourceHanSansSC-regular";
  width: calc(8.09%  - 10px);
}
.modal-title {
  width: 25%;
  margin-right: 5%;
  font-size: 16px;
  font-weight: 600;
}
.modal-value {
  width: 40%;
  font-size: 16px;
}
.hover-icon:hover {
  cursor: pointer;
}
.wrap {
  height: 45px;
}
.warning {
  height: 60px;
  font-size: 20px;
  font-weight: 600;
}
.rowClass{
  color : #1890ff
}
</style>